<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线调整图片透明度</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="cont">
    <img src="img/pic.jpg" alt="" id="pic" width="500">
    <div>
        <p>拖动滑块设置透明度：</p>
        <label><input type="range" max="100" min="0" onChange="opa()" id="num"><span id="val">0.5</span> </label>
    </div>
</div>
<script type="text/javascript">
    opa()
function opa(){
    var opacity=document.getElementById("num").value;
    var pic=document.getElementById("pic");
    var span=document.getElementById("val")
    pic.style.opacity=opacity/100;
    span.innerHTML=opacity+"%";
}
</script>
</body>
</html>